<!DOCTYPE html>
<html lang="en">
<!-- 难点在于如何删除数据 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>小黑的书架</h1>
        <ul>
            <li v-for="book in booksList" :key="book.id">
                <span>{{ book.name }}</span>
                <span>{{ book.author }}</span>
                <button @click="fun(book.id)">删除</button>
            </li>
        </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            // 利用jsonarr对象
            data: {
                booksList: [
                    { id: 1, name: "《红楼梦》", author: "曹雪芹" },
                    { id: 2, name: "《西游记》", author: "吴承恩" },
                    { id: 3, name: "《水浒传》", author: "施耐庵" },
                    { id: 4, name: "《三国演义》", author: "罗贯中" }
                ]
            },
            methods: {
                // 注意：这里为什么要用一个id去删除 因为前端删除数据时 id是唯一的 而 数组下标对应的内容不一定唯一 最后后端通过id去数据库中删除
                // 补充：filter是数组的过滤方法，返回true是表示符合规则，false是不符合规则，最后得到的数组是符合规则的数组。并且filter处理过后
                // 原数组不变，它是返回一个新的数组。
                // 语法：数组.filter((item,index)=>{
                //   if(条件) return true/false
                // ......
                // })
                fun(id) {
                    const arr = this.booksList.filter((book) => {
                        if (book.id != id) return true
                    })
                    this.booksList = arr
                }
            }
        })
    </script>
</body>

</html>